<p class="hidden" id="builtin-title">halo:io</p>

<style>
#io p {
    padding: 0;
    margin: 0;
    line-height: 26px;
}
#io textarea {
    width: 220px;
    height: 340px;
    border: 1px solid #aaa;
    padding: 4px 10px;
    font: 16px/24px Georgia;
}
#io h2 {
    font: 18px/22px Georgia;
    margin: 20px 0 10px 0;
}
#io #import {
    float: left;
    padding: 0 26px;
    border-right: 1px dashed #eee;
}
#io #export {
    float: left;
    padding: 0 26px;
}
#io .info {
    margin: 6px 0 30px 0;
    font-size: 14px;
    color: #666;
}
#io #import #imp {
    display: inline-block;
}
#io #import #import-select {
    float: left;
}
#io #import #import-submit {
    float: left;
}
#io #export #exp {
    display: inline-block;
}
#io #export #export-select {
    float: left;
}
#io #export #export-submit {
    float: left;
}
#io .separate-method {
    height: 27px;
}
#io button.import,
#io button.download {
    height: 27px;
}
</style>
<script>
$(document).ready(function() {
    get_wordlist(export_wordlist);
    $("#io #export .separate-method").change(function() {
        get_wordlist(export_wordlist);
    });

    $("#io #export .download").click(function() {
        download_wordlist();
    });

    $("#io #import .import").click(function() {
        var separator = $("#io #import .separate-method").val();
        if (separator == "line") {
            separator = /[\n\r]+/;
        }
        else if (separator == "comma") {
            separator = ",";
        }
        else if (separator == "space") {
            separator = /\s+/;
        }

        var text = $("#io #import textarea").val();

        var list = text.split(separator);
        var list_final = [];
        for (var li in list) {
            var word = $.trim(list[li]);
            if (word) {
                list_final.push(word);
            }
        }
        var count = list_final.length;
        storage_words(list_final.reverse());

        init_wordlist();

        if (count > 0) {
            $("#io #import .info").html("已成功导入 " + count + " 个单词。");
        }
    });

    $("#io .clear").click(function() {
        if (confirm("注意：将清空单词表，确定继续吗？")) {
            remove_all_word();
            init_wordlist();
        }
    });

    $("#io .reset").click(function() {
        if (confirm("注意：将清空单词表并恢复默认单词，确定继续吗？")) {
            remove_all_word();
            storage_words(default_words);
            init_wordlist();
        }
    });
});

function export_wordlist(result) {
    list = "";

    var separator = $("#io #export .separate-method").val();
    if (separator == "line") {
        if (get_OS() == "Windows") {
            separator = "\r\n";
        }
        else {
            separator = "\n";
        }
    }
    else if (separator == "comma") {
        separator = ", ";
    }
    else if (separator == "space") {
        separator = " ";
    }

    for (var i = result.rows.length - 1; i >= 0; i--) {
        list += result.rows.item(i)['word'];
        if (i > 0) {
            list += separator;
        }
    }
    $("#io #export textarea").val(list);
}

function fake_click(obj) {
    var ev = document.createEvent("MouseEvents");
    ev.initMouseEvent(
        "click", true, false, window, 0, 0, 0, 0, 0
        , false, false, false, false, 0, null
        );
    obj.dispatchEvent(ev);
}

function download_wordlist() {
    var blob = new Blob([list], {type: 'text/plain'});
    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = "Halo Word dump.txt";
    fake_click(link);

    $("#io #export .info").html("文件已储存至下载文件夹。");
}
</script>
<div id="io">

    <div class="toolbar">
        <button class="first clear">清空单词表</button>
        <button class="last reset">恢复默认单词</button>
    </div>

    <div style="clear: both"></div>

    <div id="import">
        <h2>Import Word List</h2>
        <p><textarea></textarea></p>
        <div id="imp">
            <div id="import-select">
                <select class="separate-method">
                    <option value="line">每词一行</option>
                    <option value="comma">逗号分隔</option>
                    <option value="space">空格分隔</option>
                </select>
            </div>
            <div id="import-submit">
                <button class="import">导入</button>
            </div>
        </div>
        <p class="info"></p>
    </div>

    <div id="export">
        <h2>Export Word List</h2>
        <p><textarea readonly></textarea></p>
        <div id="exp">
            <div id="export-select">
                <select class="separate-method">
                    <option value="line">每词一行</option>
                    <option value="comma">逗号分隔</option>
                    <option value="space">空格分隔</option>
                </select>
            </div>
            <div id="export-submit">
                <button class="download">下载</button>
            </div>
        </div>
        <p class="info"></p>
    </div>

</div>
